<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1 {
      text-align: center;
      color: tan;
    }

    p {
      margin: 50px auto 0;
      width: 500px;
      line-height: 30px;
      color: teal;
    }

    .theme2 h1 {
      color: green;
    }
    .theme2 p {
      color: red;
    }
  </style>
</head>

<body>
  <button id="oBtn">切换主题</button>
  <h1>今天星期一</h1>
  <p>
    先帝注1创注2业未半而注3中道崩殂，今天下三分注4，益州疲弊注5，此注6诚危急存亡之秋注7也。然注8侍注9卫之臣不懈注10于内，忠志之士忘身于外注11者，盖注12追注13先帝之殊遇注14，欲注15报注16之于陛下也。诚宜开张圣听注17，以光注18先帝遗德注19，恢弘志士注20之气注21，不宜妄自菲薄注22，引喻失义注23，以塞忠谏注24之路也。
    宫中注25府中注26，俱注27为一体注28，陟注29罚注30臧否，不宜异同注31。若有作奸犯科注32及注33为忠善者，宜付有司论其刑赏注34，以昭注35陛下平注36明之理注37，不宜偏私注38，使内注39外异法注40也。</p>
  <script>
    oBtn.onclick = function () {
      document.body.classList.toggle('theme2')
    }
  </script>
</body>

</html>